const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");

// 切换到注册界面
sign_up_btn.addEventListener("click", () => {
  container.classList.add("sign-up-mode");
});

// 切换到登录界面
sign_in_btn.addEventListener("click", () => {
  container.classList.remove("sign-up-mode");
});

// 登录表单提交事件处理器
const form = document.querySelector(".sign-in-form")
const submit = document.querySelector('.solid')
submit.onclick = (e) => {
  e.preventDefault();
  const formData = new FormData(form)
  console.log(formData.get('username'), formData.get('password'))
  axios({
    method: 'GET',
    url: 'http://m10.ctymc.cn:24048/user',

  }).then(res => {
    let isMatched = false;

    res.data.forEach(el => {
      console.log(el.username)
      console.log(el.password)
      console.log(formData.get('username'), formData.get('password'))

      if (el.username === formData.get('username')) {
        if (el.password === formData.get('password')) {
          isMatched = true;
          // 登陆成功后跳转页面并显示提示框
          swal("登陆成功😀", "success")
          setTimeout(() => {
            location.href = 'https://www.bilibili.com/'
          }, 1000)
          return
        }
      }
    });

    if (!isMatched) {
      swal("用户名或密码错误😣")
    }

    console.log(res.data)
  })
}

// 注册表单提交事件处理器
const form2 = document.querySelector('.sign-up-form')
const submit2 = document.querySelector('.solid2')
submit2.onclick = (e) => {
  e.preventDefault();
  const formData = new FormData(form2)
  console.log(formData.get('username'), formData.get('password'))
  axios({
    method: 'POST',
    url: 'http://m10.ctymc.cn:24048/user',
    data: {
      username: formData.get('username'),
      password: formData.get('password')
    }

  }).then(res => {
    // 注册成功后显示提示框
    swal("注册成功😎")
    console.log(res)
  })
}
// 获取密码输入框和小眼睛元素
const passwordInput = document.querySelector("#password-input");
const showPasswordToggle = document.querySelector("#show-password-toggle");

showPasswordToggle.addEventListener("click", function () {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    showPasswordToggle.innerHTML = '<i class="far fa-eye-slash"></i>';
  } else {
    passwordInput.type = "password";
    showPasswordToggle.innerHTML = '<i class="far fa-eye"></i>';
  }
});


